<template>
  <div class="spu-card" @click="goodsDetail(spu.id)">
    <el-image :src="spu.urls" fit="cover"
              style="border-radius: 5px;width: 100%;aspect-ratio: 1 / 1;"></el-image>
    <div style="padding: 0; height:auto; overflow: hidden">
                  <span class="spu-name"
                        style="font-weight: normal;font-size: 14px">{{ spu.name }}
                    {{ spu.detail ? spu.detail : '' }}</span>
    </div>
    <div style="display: flex;flex-wrap: wrap; align-items: flex-start;height: 48px;;overflow: hidden">
      <el-tag effect="light" v-for="value in attributeList" :key="value"
              size="small">{{ value }}
      </el-tag>
    </div>
    <div style="display: flex;justify-content: space-between;width:100%;align-items: center;margin: 5px 5px">
      <span style="color:#ff6200;font-size: 20px;font-weight: bold"><span
                    style="font-size: 10px;font-weight: normal">￥</span>{{ spu.price }}</span>
      <span style="font-size: 12px;color: #50607a">{{
          spu.sales < 100 ? spu.sales : Math.floor(spu.sales / 100) * 100
        }}<span v-show="spu.sales>=100" style="font-size: 10px">+</span>人购买</span>
    </div>
  </div>
</template>
<script>
export default {
  name:'SpuCard',
  data() {
    return {
      attributeList: []
    }
  },
  props: {
    spu: {
      type: Object,
      default: () => {
        return {
          id:0,
          urls:'',
          detail:'',
          name:'',
          price:'',
          sales:''
        }
      }
    }
  },
  methods: {
    goodsDetail() {
      //使用vuex保存用户选中的spu
      this.$store.commit('spu/setSelectedSpu',this.spu)
      this.$router.push("/front/goods")
    }
  },
  created() {
    let keys = Object.keys(this.spu.attribute)
    keys.forEach(key => {
      this.attributeList = this.attributeList.concat(this.spu.attribute[key])
    })
  },
}
</script>


<style scoped>
.spu-card {
  aspect-ratio:  1 / 1.65;
  cursor: pointer;
  border-radius: 5px;
  padding: 2px;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
.spu-card:hover {
  border: 1.5px solid #409eff;
}

.spu-name {
  overflow: hidden;
  display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
  -webkit-line-clamp: 2; /* 行数，值可以改，表示展示X行后多余的缩略展示 */
  -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
  word-break: break-all;
  border: 1px solid #eef0f5;
}
.spu-name:hover{
  color: orangered;
}
</style>